<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>组件基础</title>
    <!-- Delete ".min" for console warnings in development -->
    <script src="../vue.js"></script>

  </head>
  <body>

    <!-- app -->
    <div id="app">
      组件基础 — Vue.js<br />
      https://cn.vuejs.org/v2/guide/components.html<br />
      <br />
      <blog-post title="标题一"></blog-post>
      <blog-post title="<i>斜体</i>"></blog-post>
      <blog-post v-bind:title="a"></blog-post>
      <blog-post :title='b'></blog-post>
      <blog-post title="{{c}}"></blog-post>
      <blog-post title='c'></blog-post>
      <blog-post :title='c'></blog-post>
    </div>

    <script>

// 定义新组件
Vue.component('blog-post', {
  props:['title'],
  template: '<h3>{{title}}</h3>'
})

var app = new Vue({
  el: '#app',
  data : {
    'a':'工程',
    'b':'豌豆',
    'c':'事实'
  }
})


    </script>
  </body>
</html>
